<template>
  <div id="Index">
    <Navbar></Navbar>
        <!-- Modal -->
    <Modal title="开桌" :showmodel="openDeskModel" name="openDeskModel" @closeModal="closeModal">
      <div slot="body" class="form-group">
        <label>就餐人数：</label>
        <input v-model="num" type="text" class="form-control">
        <span :key="item" @click="num=item" v-for="item in [0,1,2,3,4,5,6,7,8,9,10]" style="margin:4px 2px;" class="btn btn-default btn-sm">{{item}}</span>
      </div>
      <button slot="footer" type="button" @click="confirm" class="btn btn-primary">确认开桌</button>
      <button slot="footer" type="button" @click="closeModal('openDeskModel')" class="btn btn-default">取消</button>
    </Modal>
    <Modal title="订单详情" :showmodel="deskInfoModal" name="deskInfoModal" @closeModal="closeModal">
      <div class="xq" slot="body">
        <div v-if="deskInfo!=null">
            <pre>
<fb><fs>订单号:{{deskInfo.base.order_num}}</fs></fb>
桌号:{{deskInfo.base.table_num}}  人数:{{deskInfo.base.people_num}}
份数:{{deskInfo.base.nums}}   菜品数:{{deskInfo.base.menu_count}}
开桌时间:{{deskInfo.base.table_create_time}}
------------------------

<div :key="index" v-for="(item,index) in deskInfo.menu">{{item.title}}<table class="table table-bordered">
                <tbody>
                  <tr>
                    <th>菜名</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>金额</th>
                  </tr>
                  <tr :key="index" v-for="(v,index) in item.lists">
                    <td>{{v.mname}}</td>
                    <td>{{v.num}}</td>
                    <td>{{v.price}}</td>
                    <td>{{v.state}}</td>
                  </tr>
                  </tbody>
                  </table>
</div>
------------------------
{{deskInfo.total_price}}
            </pre>
        </div>
        <div v-else class="alert alert-info">正在加载……</div>
      </div>
      <button slot="footer" type="button" @click="retreat" class="btn btn-danger pull-left">退菜</button>
      <button slot="footer" type="button" @click="closeModal('deskInfoModal')" class="btn btn-default pull-right">关闭</button>
    </Modal>
    <div class="container-fluid list-box">
      <div class="row main">
        <div v-if="type==0" class="col-lg-2 col-md-3">
            <button @click="start" id="start" class="btn btn-warning btn-lg start btn-block">开始点单</button>
        </div>
        <OrderItem v-if="type==0" :item="item" :key="item.id" v-for="item in deskList"></OrderItem>
        <DeskItem v-else @openModal='openModal' @closeDesk="closeDesk" @showInfo="showInfo" :key="item.id" v-for="item in deskList" :item="item"></DeskItem>
      </div>
    </div>
  </div>
</template>
<script>
import DeskItem from "@/components/DeskItem";
import OrderItem from "@/components/OrderItem";
import Navbar from "@/components/Navbar";
import Modal from "@/components/Modal";
import { axios, openWindow } from "@/static/js/utils";
let scrollTop = 0;
export default {
  name: "Index",
  data() {
    return {
      openDeskModel: false,
      deskInfoModal: false,
      deskList: [],
      deskInfo: null,
      type: 1,
      num: "",
      id: ""
    };
  },
  methods: {
    openModal(val) {
      scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      document.body.classList.add("openmodal");
      document.body.style.top = -scrollTop + "px";
      this[val.modalName] = true;
      this.id = val.id;
      this.order_id = val.order_id;
      if (val.modalName === "deskInfoModal") {
        this.showInfo();
      }
    },
    closeModal(val) {
      this[val] = false;
      document.body.classList.remove("openmodal");
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
      this.deskInfo = null;
    },
    /**
     * 确认开桌
     * @request
     */
    confirm() {
      this.closeModal("openDeskModel");
      axios
        .post("table/create", {
          id: this.id,
          nums: this.num
        })
        .then(res => {
          if (res.data.code) {
            axios.get("table/index").then(res => {
              this.deskList = res.data.data.list;
            });
          }
        });
    },
    /**
     * 关桌
     * @request
     */
    closeDesk(data) {
      axios.post("table/close", data).then(res => {
        if (res.data.code) {
          axios.get("table/index").then(res => {
            this.deskList = res.data.data.list;
          });
        }
      });
    },
    /**
     * 用餐情况
     * @request
     */
    showInfo() {
      axios
        .get("order/read", {
          params: { order_id: this.order_id }
        })
        .then(res => {
          this.deskInfo = res.data.data;
        });
    },
    getlist() {
      let userData = JSON.parse(localStorage.getItem("userData"));
      this.type = userData.type
      if (userData.type==1) {
        axios.get("table/index",{
          params:{
            is_pages:0
          }
        }).then(res => {
          this.deskList = res.data.data.list;
        });
      } else {
        axios.get("order/index",{
          params:{
            is_pages:0
          }
        }).then(res => {
          this.deskList = res.data.data.list;
        });
      }
    },
    /**
     * 退菜
     */
    retreat() {
      this.closeModal("deskInfoModal");
      openWindow("retreat.html", "退菜", {
        desk_id: this.id,
        order_id: this.order_id
      });
    },
    /**
     * 开始点单
     * @method
     */
    start() {
      axios.post("order/create").then(res => {
        if (res.data.code) {
          openWindow("order.html", "点餐", {
            order_id: res.data.data.order_id
          });
        }
      });
    }
  },
  components: {
    DeskItem,
    Navbar,
    Modal,
    OrderItem
  },
  created() {
    if (typeof plus != "undefined") plus.navigator.setStatusBarStyle("light");
    this.getlist();
  },
  mounted() {
    FastClick.attach(document.body);
    let _this = this;
    window.addEventListener("reload", function() {
      _this.getlist();
    });
  }
};
</script>
<style>
.start {
  height: 80px;
  font-size: 24px;
  margin-bottom: 20px;
}
.navbar {
  border-radius: 0;
  border: none;
  background-color: #bc2923;
  padding-top: 15px;
  margin-bottom: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
body.openmodal {
  position: fixed;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
#Index {
  padding-top: 65px;
}

.navbar a {
  color: white;
}

.navbar img {
  height: 30px;
  margin-right: 10px;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  height: 50px;
  padding-right: 15px;
}

.list-box {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main {
  padding-top: 10px;
  padding-bottom: 10px;
}

.panel-danger .panel-heading {
  background-color: #ff412c;
  color: #fff;
}

.panel-success .panel-heading {
  background-color: #67b252;
  color: #fff;
}
.panel-warning .panel-heading {
  background-color: #ffa821;
  color: #fff;
}
.table {
  margin-bottom: 0;
}

small,
p {
  color: inherit !important;
}
</style>
